﻿@using WebApp.Extensions
@model Dto.ApiResponses.MemberResponses.MemberDetailResponse

@{
    ViewBag.CurrentPage = WebApp.Common.PageSetting.MemberNewPageSetting;
    var sectionId = (Request.IsAjaxRequest() ? "Ajax" : "View") + "_Member_Add";
}


@section Scripts{
    <script type="text/javascript">
        require(['Member/add', 'Util'], function (api, util) {
            var model = util.toJS(@(Html.ToJson(Model)));
            $(function () { api.exec('@sectionId', model); });
        });
    </script>
}

<div class="container" data-bind="stopbinding: true">
    <section id="@sectionId">
        <div class="row ">
            <div class="col-xs-12 col-sm-12 col-md-6">
                <legend>Personal Detail</legend>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="photo">Photo</label>
                            <div class="fileDragHolder">
                                <canvas id="imgCanvas" width="150" height="187"></canvas>
                                <div>
                                    <a id="photo" href="#" data-bind="click: selectPhoto">Select File</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="name">Name</label>
                            <input type="text" id="name" class="form-control" data-bind="value: name" placeholder="Name" required />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for=DOB>Date of Birth</label>
                            <input id="DOB" type="text" class="form-control" data-bind="datepicker : dateOfBirth,  datepickerOptions : { format: 'MM/DD/YYYY' }" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="address">Address</label>
                            <input id="address" type="text" class="form-control" data-bind="value :address " placeholder="Address" required />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="email">Email</label>
                            <input id="email" type="text" class="form-control" data-bind="value: email" placeholder="Email" required />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="mobile">Mobile</label>
                            <input id="mobile" type="text" class="form-control" data-bind="value: mobile" placeholder="Mobile" required />
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6">
                <legend>Auth Detail</legend>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="tagid">Tag Id</label>
                            <input id="tagid" type="text" value="" class="form-control" data-bind="value: tagId" placeholder="Tag Id" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="code">Code</label>
                            <input id="code" type="text" value="" class="form-control" data-bind="value: code" placeholder="Code" required />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="validf">Valid From</label>
                            <input id="validf" type="text" class="form-control" data-bind="datepicker : validFrom,  datepickerOptions : { format: 'MM/DD/YYYY' }" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="validt">Valid To</label>
                            <input id="validt" type="text" class="form-control" data-bind="datepicker : validTo,  datepickerOptions : { format: 'MM/DD/YYYY' }" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-3">
                            <div class="input-group">
                                <label>Block</label>
                                <span class="input-group-btn">
                                    <input type="checkbox" data-bind="checked: block">
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="role">Role </label>
                            <select id="role" class="form-control" data-bind="options: roles, optionsText: 'name', value: selectedRole, optionsValue: 'name', optionsCaption: '-- Select Role --'" required></select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="status">User Status </label>
                            <select id="status" class="form-control" data-bind="options: userStatuses, optionsText: 'name', value: selectedStatus,optionsValue: 'name', optionsCaption: '-- Select Status --'" required></select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row ">
            <div class="col-xs-12 col-sm-12 col-md-6">
                <legend>Config Detail</legend>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-3">
                            <div class="input-group">
                                <label>Send Email</label>
                                <span class="input-group-btn">
                                    <input type="checkbox" data-bind="checked: sendEmail">
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-3">
                            <div class="input-group">
                                <label>Send Sms</label>
                                <span class="input-group-btn">
                                    <input type="checkbox" data-bind="checked: sendSms">
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-3">
                            <div class="input-group">
                                <label>Use Print</label>
                                <span class="input-group-btn">
                                    <input type="checkbox" data-bind="checked: usePrint">
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6">
                <legend>Other Detail</legend>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="screen">Screen Message</label>
                            <input id="screen" type="text" class="form-control" data-bind="value :screenMessage " placeholder="Screen Message" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <div class="col-xs-12 col-sm-12 col-md-12  center">
                        <button class="btn btn-primary btn-lg" data-bind="click:save">Submit</button>&nbsp;&nbsp;&nbsp;&nbsp;
                        <button class="btn btn-primary btn-lg" data-bind="click: cancel">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>